<template>
    <div class="app-container">
        <h4 class="form-header h4">基本信息</h4>
        <el-form ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="4" >
                    <el-button @click="close()">返回</el-button>
                </el-col>
                <el-col :span="4" >
                    <el-form-item label="用户昵称/姓名" prop="nickname">
                        <el-input v-model="form.nickname" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="4" >
                    <el-form-item label="登录账号" prop="username">
                        <el-input  v-model="form.username" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input  v-model="form.mobile" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <h4 class="form-header h4">积分详情</h4>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
            <el-form-item label="水机：" prop="water_id">
                <el-select v-model="queryParams.water_id"  clearable placeholder="请选择水机" size="small"  >
                    <el-option v-for="(item, index) in waterMachineData" :key="index" :label="item.water_title"
                               :value="item.water_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="start_end_time">
                <el-date-picker v-model="queryParams.start_end_time" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                                start-placeholder="开始日期" end-placeholder="结束日期"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <h4  >水机总积分：{{sum_score_total}}</h4>
            </el-col>
            <el-col :span="1.5">
                <h4  >当前总积分：{{score_total}}</h4>
            </el-col>
        </el-row>
        <el-table  v-loading="loading" :data="userScoreLists" border fit highlight-current-row>
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column   label="id" align="center" prop="id"  width="55" />
            <el-table-column align="center" label="赠送时间">
                <template slot-scope="{ row }">
                    {{ row.gift_time | parseTime("{y}-{m}-{d}") }}
                </template>
            </el-table-column>
            <el-table-column prop="water_id" label="水机">
                <template slot-scope="{row}">
                    {{ row.water_device_info? row.water_device_info.water_title : "" }}
                </template>
            </el-table-column>
            <el-table-column label="水机积分"   prop="sum_score" />
            <el-table-column label="比例"   prop="proportion" />
            <el-table-column label="获得积分"   prop="score" />
        </el-table>

        <!-- 分页 -->
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.limit"
            @pagination="getLists"
        />
    </div>
</template>

<script>
import { getAllCom } from "@/api/grzq/community.js";
import { detailBuyUsers, updateUsersBuyWater } from "@/api/grzq/user_buy";

import { getApparatusAllList } from "@/api/grzq/apparatus.js";
import {getBuyScoreDetailsList,getMemberScoreList} from "@/api/grzq/buy_scores";

export default {
    name: "AuthRole",
    dicts:['sys_normal_flag'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 分页信息
            total: 0,
            pageNum: 1,
            sum_score_total: 0,
            score_total: 0,
            pageSize: 10,
            queryParams: {
                page: 1,
                water_id: '',
                start_end_time: [],
                uid: '',
                limit: 10,
            },
            // 选中角色编号
            userScoreLists:[],
            communityList:[],
            apparatusList:[],
            waterMachineData:[],
            apparatusesIds:[],
            // 角色信息
            waters: [],
            // 用户信息
            form: {}
        };
    },
    created() {
        this.getAllCom()
        let userId = this.$route.query && this.$route.query.userId;
        if (userId) {
            this.queryParams.uid = userId;
            this.loading = true;
            detailBuyUsers(userId).then((response) => {
                console.log("response",response)
                this.form = response.data.user;
                this.waters = response.data.user_with_water;
                this.waterMachineData = response.data.water_list;
                this.$nextTick(() => {
                    this.waters.forEach((row) => {
                        console.log("$nextTick",row)
                        this.$refs.tableWater.toggleRowSelection(row);
                    });
                });
                this.loading = false;
            });
        }
        this.getLists();
    },
    methods: {
        // 片区
        async getAllCom() {
            const res = await getAllCom();
            this.communityList = res.data;
        },
        async getLists() {
            let that = this;
            that.loading = true;
            const {data, status, msg} = await getMemberScoreList(this.queryParams);
            that.userScoreLists = data.data;
            that.loading = false;
            that.total = data.total;
            that.score_total = parseFloat(data.score).toFixed(3);
            that.sum_score_total = parseFloat(data.sum_score).toFixed(3);
            that.queryParams.limit = data.per_page || 10;

        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getLists();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

        /** 提交按钮 */
        submitForm() {
            const userId = this.form.userId;
            console.log("userId",userId)
            const water_role = this.form.water_role;
            const waterIds = this.waterIds;
            updateUsersBuyWater({ user_id: userId,water_role: water_role, waterIds: waterIds }).then((response) => {
                this.msgSuccess("授权成功");
                this.close();
            });
        },
        /** 关闭按钮 */
        close() {
            const obj = { path: "/member" };
            this.$router.go(-1);
        },
    },
};
</script>
